<!--
 * @Author: taosong
 * @Date: 2022-10-21 13:24:43
 * @LastEditors: taosong
 * @LastEditTime: 2022-10-27 15:58:18
 * @Description: taosongs
-->
<template>
  <div class="bg-white dark:bg-zinc-900 xl:dark:bg-zinc-800 rounded pb-1">
    <div
      class="relative w-full rounded cursor-zoom-in group"
      :style="{ backgroundColor: randomRGB() }"
      @click="onToPinsClick"
    >
      <!-- 图片 -->
      <img
        v-lazy
        ref="imgTarget"
        class="w-full rounded bg-transparent"
        :style="{ height: (width / data.photoWidth) * data.photoHeight + 'px' }"
        :src="data.photo"
        alt="图片"
      />
      <!-- 遮罩层, 在移动端下不会显示遮罩层 -->
      <div
        class="hidden opacity-0 w-full h-full bg-zinc-900/50 absolute top-0 left-0 rounded duration-300 group-hover:opacity-100 xl:block"
      >
        <!-- 分享 -->
        <m-button class="absolute top-1.5 left-1.5">分享</m-button>
        <!-- 点赞 -->
        <m-button
          type="info"
          iconClass="fill-zinc-900 dark:fill-zinc-200"
          icon="heart"
          class="absolute top-1.5 right-1.5"
        ></m-button>
        <!-- 下载 -->
        <m-button
          type="info"
          iconClass="fill-zinc-900 dark:fill-zinc-200"
          icon="download"
          size="small"
          class="absolute bottom-1.5 left-1.5 bg-zinc-100/70"
          @click="onDownload"
        ></m-button>
        <!-- 全屏 -->
        <m-button
          type="info"
          size="small"
          iconClass="fill-zinc-900 dark:fill-zinc-200"
          icon="full"
          @click="omImgFullScreen"
          class="absolute bottom-1.5 right-1.5 bg-zinc-100/70"
        ></m-button>
      </div>
    </div>
    <!-- 标题 -->
    <p class="text-sm mt-1 font-bold text-zinc-900 dark:text-zinc-300 px-1">
      {{ data.title }}
    </p>
    <!-- 作者信息 -->
    <div class="flex items-center mt-1 px-1">
      <img
        class="h-2 w-2 mr-1 rounded-full"
        :src="data.avatar"
        alt="作者图片"
      />
      <span class="text-sm text-zinc-500">{{ data.author }}</span>
    </div>
  </div>
</template>

<script setup>
import { saveAs } from 'file-saver'
import { randomRGB } from '@/utils/color.js'
import { message } from '@/libs'
import { useElementBounding, useFullscreen } from '@vueuse/core'
import { ref } from '@vue/reactivity'
import { computed } from '@vue/runtime-core'
const props = defineProps({
  data: {
    type: Object,
    required: true
  },
  width: {
    type: Number
  }
})

const emits = defineEmits(['click'])

// 下载图片
const onDownload = () => {
  message('success', '图片开始下载')
  setTimeout(() => {
    saveAs(props.data.photoDownLink)
  }, 1000)
  // 接收一个参数(图片下载地址)
}

// 生成全屏方法
const imgTarget = ref(null)
const { enter: omImgFullScreen } = useFullscreen(imgTarget)

// pins跳转记录，记录图片的中心点（X | Y + 宽 | 高 的一半）
const imgContainerCenter = computed(() => {
  const {
    x: imgContainerX,
    y: imgContainerY,
    width: imgContainerWidth,
    height: imgContainerHeight
  } = imgTarget.value.getBoundingClientRect()
  return {
    translateX: parseInt(imgContainerX + imgContainerWidth / 2),
    translateY: parseInt(imgContainerY + imgContainerHeight / 2)
  }
})

// 点击跳转详情
const onToPinsClick = () => {
  emits('click', {
    item: props.data,
    location: imgContainerCenter.value
  })
}
</script>
<style lang="scss" scoped></style>
